import { Example, ExampleCode } from '@/components/Example';
import { ComponentPropsToStylePropsMap, Card } from '@aws-amplify/ui-react';
import {
  BackgroundStyles,
  BackgroundThemeTokenExample,
  BorderStyles,
  BorderStylePropExample,
  ColorStyles,
  ColorThemeTokenExample,
  FlexStyles,
  FlexStylePropExample,
  GridStyles,
  GridStylePropExample,
  MarginAndPaddingStyles,
  MarginAndPaddingThemeTokenExample,
  PositionStyles,
  PositionThemeTokenExample,
  ShadowStyles,
  ShadowThemeTokenExample,
  SizeStyles,
  SizeThemeTokenExample,
  TypographyStyles,
  TypographyThemeTokenExample,
  OtherStyles,
} from './examples';

These style props are available on Amplify UI primitive components and can be used to modify the corresponding styles. This allows users to quickly make style adjustments without having to go through CSS or add a theme object. Style props override any conflicting CSS style sheet or theme styling.

There are three ways of passing style props to a component:
1. Pass any valid CSS property directly (e.g., `backgroundColor="red"`)
- This is useful for rapid prototyping or styling a component which differs from the main theme
2. Use a design token from the Theme object by destructuring tokens from the `useTheme` hook (e.g., `backgroundColor={tokens.colors.red[40]}`)
- This method utilizes [Amplify UI's theming capabilities](/theming), allowing for consistent design decisions as well as dynamic updates to the theme (e.g., light/dark mode).
3. Use the shorthand syntax to reference design tokens without using the `useTheme` hook (e.g., `backgroundColor="red.40"`)
- This is a convenient shorthand for method 2. However, not all design tokens have a shorthand mapping.

## Background Styles
<Example>

<BackgroundThemeTokenExample/>
<ExampleCode>

```jsx file=./examples/BackgroundExamples.tsx

```

</ExampleCode>
</Example>

<BackgroundStyles />

## Border Styles 

<Example className="example-styling-demo">
<BorderStylePropExample/>
<ExampleCode>
```jsx file=./examples/BorderExamples.tsx

```
</ExampleCode>
</Example>

<BorderStyles />

## Color Styles

<Example>
<ColorThemeTokenExample/>
<ExampleCode>
```jsx file=./examples/ColorExamples.tsx
```
</ExampleCode>
</Example>

<ColorStyles />

## Flex

<Example>
<FlexStylePropExample />
<ExampleCode>
```jsx file=./examples/FlexExamples.tsx
```
</ExampleCode>
</Example>

<FlexStyles />

## Grid

<Example>
<GridStylePropExample />
<ExampleCode>
```jsx file=./examples/GridExamples.tsx
```
</ExampleCode>
</Example>

<GridStyles />

## Margin and Padding

<Example className="example-styling-demo">
<MarginAndPaddingThemeTokenExample />
<ExampleCode>
```jsx file=./examples/MarginAndPaddingExamples.tsx
```
</ExampleCode>
</Example>

<MarginAndPaddingStyles />

## Position Styles

<Example>
<PositionThemeTokenExample />
<ExampleCode>
```jsx file=./examples/PositionExamples.tsx
```
</ExampleCode>
</Example>

<PositionStyles />

## Size Styles

<Example className="example-styling-demo">
<SizeThemeTokenExample />
<ExampleCode>
```jsx file=./examples/SizeExamples.tsx
```
</ExampleCode>
</Example>

<SizeStyles />

## Shadow Styles

<Example className="example-styling-demo">
<ShadowThemeTokenExample />
<ExampleCode>
```jsx file=./examples/ShadowExamples.tsx
```
</ExampleCode>
</Example>

<ShadowStyles />

## Typography Styles

<Example>
<TypographyThemeTokenExample />
<ExampleCode>
```jsx file=./examples/TypographyExamples.tsx
```
</ExampleCode>
</Example>

<TypographyStyles />

## Other Styles

Below is a list of other style properties accepted by Amplify UI primitives.

<OtherStyles />

## Design Tokens

For a list of all available design tokens and their associated values please see [colors](/theming/default-theme/colors), [typography](/theming/default-theme/typography), and [sizes](/theming/default-theme/sizes)